<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#wrapper {
				margin: 20px auto;
				width: 343px;
				height: 480px;
				background: url(img/bg.jpg) no-repeat;
				position: relative;
				overflow: hidden;
			}
			
			ul {
				width: 62px;
				height: 423px;
				position: absolute;
				left: 343px;
			}
			
			#up-bg {
				width: 62px;
				height: 100px;
				background: url(img/up_mod.png);
			}
			
			#up {
				width: 62px;
				height: 60px;
				background: url(img/up_pipe.png);
			}
			
			#space {
				width: 62px;
				height: 100px;
			}
			
			#down {
				width: 62px;
				height: 60px;
				background: url(img/down_pipe.png);
			}
			
			#down-bg {
				width: 62px;
				height: 104px;
				background: url(img/down_mod.png);
			}
			
			#bird {
				width: 40px;
				height: 26px;
				background: url(img/bird0.png);
				position: absolute;
				top: 198px;
				left: 50px;
				z-index: 20;
			}
			
			#slidr {
				position: absolute;
				width: 100%;
				height: 14px;
				top: 423px;
				z-index: 10;
				background:url(img/slider.jpg) -10px 0;
			}
			
			/*#slidr img {
				float: left;
			}*/
			#meng{
				width: 343px;
				height: 480px;
				background: url(img/bg.jpg) no-repeat;
				position: absolute;
				z-index: 99;
			}
			#head{
				width: 236px;
				height: 77px;
				background: url(img/head.jpg);
				position: absolute;
				left: 82px;
				top: 80px;
			}
			#start{
				width: 85px;
				height: 29px;
				background: url(img/start.jpg);
				position: absolute;
				top: 260px;
				left: 60px;
				cursor: pointer;
			}
			#submit{
				width: 85px;
				height: 29px;
				background: url(img/submit.jpg);
				position: absolute;
				top: 260px;
				right: 60px;
				cursor: pointer;
			}
			
			#meng-end{
				width: 221px;
				height: 40px;
				background: url(img/game_over.jpg);
				position: absolute;
				top: 150px;
				left: 60px;
				z-index: 89;
				display: none;
			}
			#start2{
				width: 85px;
				height: 29px;
				background: url(img/start.jpg);
				position: absolute;
				top: 110px;
				left: 60px;
				cursor: pointer;
			}
			#fen{
				text-align: center;
				position: absolute;
				z-index: 90;
				width: 100%;
				top: 20px;
			}
			#score1{
				display: none;
				width: 28px;
				height: 39px;
				background:url(img/0.jpg) no-repeat;	
			}
			#score{
				display: inline-block;
				width: 28px;
				height: 39px;
				background:url(img/0.jpg) no-repeat;
			}
		</style>
	</head>

	<body>
		<div id="wrapper">
			<div id="bird"></div>
			<div id="slidr">
				<!--<img src="img/slider.jpg" />
				<img src="img/slider.jpg" />-->
			</div>
			<div id="fen">
				<span id="score1"></span>
				<span id="score"></span>
			</div>
			<div id="meng">
				<div id="head"></div>
				<div id="start"></div>
				<div id="submit"></div>
			</div>
			<div id="meng-end">
				<div id="start2"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//定义各个参数
		var num = 0; //鸟自由下落的参数
		var num2 = 0; //鸟扇动翅膀的参数1
		var num3 = 0; //鸟扇动翅膀的参数2
		var index = 0; //切换图片路径的参数
		var deg = 0; //鸟头旋转度数的参数
		var  weilan = 0; //围栏移动的参数
		//背景外框
		var wrapper = document.querySelector("#wrapper");
			//鸟
		var bird = document.getElementById("bird");
			//围栏
		var slider = document.getElementById("slidr");
			//开始蒙版
		var meng = document.getElementById("meng");
			//结束蒙版
		var mengEnd = document.getElementById("meng-end");
			//开始按钮
		var start = document.getElementById("start");
			//再来按钮
		var start2 = document.getElementById("start2")
			//十位得分
		var score1 = document.getElementById("score1")
			//个位得分
		var score = document.getElementById("score");
			//定义一个用来装水管的数组
		var pipeArr = [];
		//得分
		var scoreNum = 0;
		//用来判断是否碰撞的状态值
		var peng = false;
		//开始单击事件
		start.onclick = function(e){
			e.stopPropagation();
			meng.style.display = "none"
			creatPipe()
			//生成管道定时器
			createTime = setInterval(creatPipe,3000)
			//鸟运动的定时器
			 birdTimer = setInterval(birdFly,30)
		}
		//结束单击事件
		start2.onclick = function(){
			mengEnd.style.display = "none"
			window.location.reload();
			 
		}
		//管道创建
		function creatPipe() {
			var rand = parseInt(Math.random() * 204);
			var ul = document.createElement("ul");
			//用来判断分数的状态值
			var status = false;
			ul.innerHTML += "<li id=up-bg style='height:" + rand + "px" + " ;'></li>";
			ul.innerHTML += "<li id=up></li>";
			ul.innerHTML += "<li id=space></li>";
			ul.innerHTML += "<li id=down></li>";
			ul.innerHTML += "<li id=down-bg style='height: " + (203 - rand) + "px" + ";'></li>";
			wrapper.appendChild(ul);
			pipeArr.push(ul);
				//管道生成和移动的定时器
			var pipeTimer = setInterval(function() {
				
				//如果碰撞，关闭定时器
				if(peng){
					clearInterval(pipeTimer);
					clearInterval(weilanTime);
					wrapper.onmousedown = null;
				}
				//管道移动
				ul.style.left = ul.offsetLeft - 2 + "px";
				//管道删除
				if(ul.offsetLeft < -70) {
					wrapper.removeChild(ul);
				}
				//判断管道正好经过小鸟的上方
				if(ul.offsetLeft <= (bird.offsetWidth + bird.offsetLeft) && ul.offsetLeft >= (bird.offsetLeft - bird.offsetWidth)) {
					//判断小鸟的碰撞
					if(bird.offsetTop < rand + 60 || bird.offsetTop > rand + 160 - 26) {
						peng = true;
						clearInterval(createTime)
						deg =100
					}
				}
				//判断是否得分
				if(ul.offsetLeft < (bird.offsetLeft - ul.offsetWidth)) {
					if(!status) {
						scoreNum += 1;
					}
					//走过之后，状态值为true
					status = true;
				}
				//得分之后，将分数值赋给分数的属性
				if(scoreNum<10){
					var fen0 = scoreNum;
					var fen1 = 0;
				}
				if(scoreNum>=10){
					score1.style.display = "inline-block"
					fen1 = parseInt(scoreNum/10) ; 
					fen0 = parseInt(scoreNum%10);
					
				}
				score1.style.backgroundImage = "url(img/"+fen1+".jpg)"
				score.style.backgroundImage = "url(img/"+fen0+".jpg)"
				
			}, 30)
		}
		//围栏移动定时器
		weilanTime = setInterval(function() {
			weilan-=2;
				slider.style.backgroundPositionX =  weilan+ "px"
				//if(slider.offsetLeft <= -340) {
				//	slider.style.left = 0
				//}
			}, 30)
		//小鸟运动
		function birdFly(){
			deg += 3; //鸟头旋转每次增加2度
			num += 0.5; //鸟自由下落的参数，每次增加0.2
			num2++; //扇动翅膀参数++
			if(deg > 60) {
				deg = 60;
			}
			//切换鸟的图片路径实现扇动翅膀
			if(num2 % 4 == 0) {
				num3++;
				if(num3 % 2 == 0) {
					index = 1
				} else {
					index = 0
				}
				bird.style.backgroundImage = "url(img/bird" + index + ".png)";
			}
			//鸟自由下落
			bird.style.top = bird.offsetTop + num + "px"
				//鸟头旋转
			bird.style.transform = "rotate(" + deg + "deg)"
				//单击背景，鸟上下运动
			
			if(bird.offsetTop > 390) {
				bird.style.top = 390 + "px"
				clearInterval(birdTimer)
				peng = true;
				mengEnd.style.display = "block"
			}
		}
	
		//鼠标的点击事件
		wrapper.onmousedown = function(e) {
			e.stopPropagation();
			deg = -40;
			num = -8;
			if(bird.offsetTop<=10){
				wrapper.onmousedown = null;
				deg = 90;				
			}
		}
	</script>

</html>